<template>
  <div class="demo-music">
    <div class="music">
      <ul id="waves" class="movement">
        <li class="li1">
          <span class="ani-li" :class="{ paused: !isPlay }"></span>
        </li>
        <li class="li2">
          <span class="ani-li" :class="{ paused: !isPlay }"></span>
        </li>
        <li class="li3">
          <span class="ani-li" :class="{ paused: !isPlay }"></span>
        </li>
        <li class="li4">
          <span class="ani-li" :class="{ paused: !isPlay }"></span>
        </li>
        <li class="li5">
          <span class="ani-li" :class="{ paused: !isPlay }"></span>
        </li>
        <li class="li6">
          <span class="ani-li" :class="{ paused: !isPlay }"></span>
        </li>
        <li class="li7">
          <span class="ani-li" :class="{ paused: !isPlay }"></span>
        </li>
        <li class="li8">
          <span class="ani-li" :class="{ paused: !isPlay }"></span>
        </li>
      </ul>
      <div class="music-state"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["isPlay"]
};
</script>

<style lang="scss" scoped>
.demo-music {
  width: 100%;
  height: 100px;
  .music {
    width: 80%;
    height: 100px;
    margin: 0 auto;
  }
}
#waves {
  width: 100%;
  height: 100%;
  li {
    float: left;
    height: 100%;
    width: 12%;
    overflow: hidden;
    margin-right: 1px;
    position: relative;
    span {
      position: absolute;
      bottom: 0;
      display: block;
      height: 100%;
      width: 100px;
      background: radial-gradient(
        transparent 50%,
        rgba(255, 255, 255, 0.4) 100%
      );
    }
  }
  .li1 span {
    animation: waves 0.6s linear 0s infinite alternate;
    animation-play-state: running;
  }

  .li2 span {
    animation: waves 0.9s linear 0s infinite alternate;
    animation-play-state: running;
  }

  .li3 span {
    animation: waves 1s linear 0s infinite alternate;
    animation-play-state: running;
  }

  .li4 span {
    animation: waves 0.8s linear 0s infinite alternate;
    animation-play-state: running;
  }

  .li5 span {
    animation: waves 0.7s linear 0s infinite alternate;
    animation-play-state: running;
  }

  .li6 span {
    animation: waves 0.5s linear 0s infinite alternate;
    animation-play-state: running;
  }

  .li7 span {
    animation: waves 0.6s linear 0s infinite alternate;
    animation-play-state: running;
  }

  .li8 span {
    animation: waves 0.3s linear 0s infinite alternate;
    animation-play-state: running;
  }
}
.paused {
  animation-play-state: paused !important;
}

@keyframes waves {
  10% {
    height: 20%;
  }
  20% {
    height: 60%;
  }
  40% {
    height: 40%;
  }
  50% {
    height: 100%;
  }
  100% {
    height: 50%;
  }
}
</style>
